<template>
  <div
    id="currencyChooseModel"
    class="currency-choose-model"
    :class="{isShow: isShow}"
    @click="currencyModelClick"
  >
    <div class="currency-cont">
      <div class="currency-title">
        <span v-if="currencyChoose">选择{{ isDraw ? '提现' : '充值' }}到币种账户</span>
        <span v-else>选择{{ isDraw ? '提现' : '充值' }}资金币种</span>
      </div>
      <div class="currency-choose-list">
        <div class="currency-item" v-for="item in currencyCodeAccount" :key="item.code" @click="chooseCurrency(item.code)">
          <span v-if="!currencyChoose">{{item.name}}</span>
          <span v-else>
            {{item.name}}账户
            <span class="code">({{item.code}})</span>
          </span>
          <i
            :class="showCurrencyItem(item.code)"
            :data-code="item.code"
          >
            <span></span>
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data: function() {
    return {
      currencyCodeAccount: this.$store.state.currencys || []
    };
  },
  computed: {
    isDraw(){//是否提现
      return this.$store.state.wealth.isShowWithdrawDialogBox;
    },
    currencyChoose() {
      return this.$store.state.wealth.isShowAccountOrCurrency;
    },
    getAccountCode() {
      return this.$store.state.wealthRecharge.account_code;
    },
    getCurrencyCode() {
      return this.$store.state.wealthRecharge.currency_code;
    },
    //是否显示面板
    isShow() {
      return this.$store.state.wealth.isShowCurrencyChooseModel;
    }
  },
  methods: {
    showCurrencyItem(code) {
      let _code = this.currencyChoose
        ? this.getAccountCode
        : this.getCurrencyCode;
      return {
        active: code === _code ? true : false
      };
    },
    chooseCurrency(code) {
      if (this.currencyChoose) {
        this.$store.commit("wealthRecharge/SET_ACCOUNT_CODE", code);
      } else {
        this.$store.commit("wealthRecharge/SET_CURRENCY_CODE", code);
      }


      //选择币种后关闭弹窗啊
      this.$store.commit("wealth/SET_isShowCurrencyChooseModel", false);
    },
    currencyModelClick(e) {
      if (e.target.id && e.target.id === "currencyChooseModel") {
        this.$store.commit("wealth/SET_isShowCurrencyChooseModel", false);
      }
    },
    ...mapMutations({
      toggle: "todos/toggle"
    })
  }
};
</script>

<style>
.currency-choose-model {
  display: none;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.currency-choose-model.isShow {
  display: block;
}
.currency-cont {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
.currency-choose-model.isShow .currency-cont {
}
.currency-title {
  height: 108px;
  border-bottom: 2px solid #ededf0;
}
.currency-title span {
  margin-left: 30px;
  line-height: 108px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: rgb(102, 102, 102);
}
.currency-choose-list {
}
.currency-choose-list .currency-item {
  margin-left: 30px;
  line-height: 112px;
  height: 112px;
  border-bottom: 2px solid #ededf0;
}
.currency-choose-list .currency-item:last-child {
  border-bottom: 0;
}
.currency-choose-list .currency-item span {
  font-family: "PingFangSC-Regular";
  font-size: 32px;
  color: rgb(41, 41, 41);
}
.currency-choose-list .currency-item .code {
  margin-left: 6px;
  font-family: "PingFangSC-Regular";
  font-size: 28px;
  color: rgb(153, 153, 153);
}
.currency-choose-list .currency-item i {
  /* float: right;
  display: inline-block; */
  position: absolute;
  right: 40px;
  margin-top: 38px;
  width: 36px;
  height: 36px;
  border: 2px solid #bec2cc;
  border-radius: 36px;
}
.currency-choose-list .currency-item i.active {
  border: 2px solid #2086f9;
}
.currency-item i span {
  display: block;
  margin-left: 8px;
  margin-top: 8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 16px;
}
.currency-item i.active span {
  background-color: #2086f9;
}
</style>
